<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var startPoint = {x: 50, y: 50};
    var endPoint = {x: 0, y: 0};
    var speed = {x: 0, y: 0};
    var count = 10;

    ctx.moveTo(startPoint.x, startPoint.y);
    speed.x = (endPoint.x - startPoint.x) / count;
    speed.y = (endPoint.y - startPoint.y) / count;

    var curPoint = {x: startPoint.x, y: startPoint.y};      //对象深拷贝方法1
    //var curPoint = JSON.parse(JSON.stringify(startPoint));  //对象深拷贝方法2
    var timer = setInterval(function () {
        ctx.lineTo(curPoint.x + speed.x, curPoint.y + speed.y);
        ctx.stroke();
        curPoint.x += speed.x;
        curPoint.y += speed.y;

        console.log('curPoint: x =' + curPoint.x + ' y =' + curPoint.y);
        console.log('startPoint: x =' + startPoint.x + ' y =' + startPoint.y);
        if (curPoint.x == endPoint.x) {
            clearInterval(timer);
        }
    }, 200);
</script>

</body>
</html>